<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
     body {
        position: relative;
      }
      .item {
        margin: 20px;
        width: 100px;
        border: 1px solid red;
        position: absolute;
        box-sizing: border-box;
      }
</style>
<body>
    
</body>
</html>
<script>
    function setFlow(){
      for (let i = 0; i < 15; i++) { //先定它个15个div
        var div = document.createElement("div");
        div.className = "item";
        div.style.height = i * 10 + 10 + "px"; //假设图片高度,要替换成实际图片高度 。
        document.body.appendChild(div);
      }
      var heightArray = [], //存储每列的高度。
        columns = 5; //假设为5列;
      for (let i = 0; i < 15; i++) {
        // 遍历所有div，对他们设置left和top值
        var currentDiv = document.getElementsByClassName("item")[i];
        if (i < columns) { //i<columns说明为第一排
          currentDiv.style.top = 0; //第一排top值为0
          currentDiv.style.left = i * 100 + "px"; // 第一张left:0,第二张left:100...
          heightArray[i] = currentDiv.offsetHeight; // 第1排直接设置
        } else {// 非第1排
          var minHeight = Math.min.apply(null, heightArray); //找到高度最小值
          var minIndex = heightArray.indexOf(minHeight); //找到最小值所在列
          currentDiv.style.top = minHeight + "px"; // 设置top值
          currentDiv.style.left = minIndex * 100 + "px"; //设置left值
          heightArray[minIndex] += currentDiv.offsetHeight; // 更新高度数组。
 
        }
      }
      console.log(heightArray)
    }
    setFlow();
</script>